<template>
<!--    插值指令：将页面显示的文本内容与响应式变量的值进行绑定
        如果修改值，页面显示文本也变化-->
    <h1>我是第一个页面{{info}}</h1>
    <span>{{info}}</span>
    {{info}}
    <hr>
    <button @click="f">点我</button>
    <div v-text="aaa"></div>
    <div v-html="aaa"></div>
</template>

<script setup>
  import {ref} from "vue";

  const info = ref('我是 info');
  const f = () => {
    console.log('点击了按钮');
    console.log(info.value);
    info.value = '修改了 info';
  }

  const aaa = ref('我是 aaa 来显示<mark>高亮</mark>效果')
</script>

<style scoped>

</style>